<template>
	<view class="bottom">
		<view class="div"></view>
		<uvtabbar :value="value" :fixed="true" inactiveColor="#999999" activeColor="#FDA307" :placeholder="true"
			:safeAreaInsetBottom="false">
			<uvtabbarItem v-for="(item,key) in list" :key="key" :text="item.text" :name="item.text"
				@click="toUrl(item)">

				<button class="cen" style="height:80rpx;" slot="inactive-icon" open-type="contact" v-if="item.url=='kf'">
					<image class="icon" :src="item.img"></image>
					<view class="icon_text">{{item.text}}</view>
				</button>

				<view class="cen" v-if="item.url!='kf'" slot="inactive-icon">
					<image class="icon" :src="item.img"></image>
					<view class="icon_text">{{item.text}}</view>
				</view>

				<view  class="cen" v-if="item.url!='kf'" slot='active-icon'>
					<image class="icon" :src='item.imgs'></image>
					<view class="icon_text orange">{{item.text}}</view>
				</view>

			</uvtabbarItem>
		</uvtabbar>
	</view>
</template>

<script>
	import uvtabbar from "@/uni_modules/uv-tabbar/components/uv-tabbar/uv-tabbar.vue";
	import uvtabbarItem from "@/uni_modules/uv-tabbar/components/uv-tabbar-item/uv-tabbar-item.vue";
	export default {
		components: {
			uvtabbar,
			uvtabbarItem
		},
		props: ['value'],
		data() {
			return {
				list: [{
						text: '首页',
						url: '/pages/tabar/index',
						img: require('@/static/img/index_gray.png'),
						imgs: require('@/static/img/index_green.png')
					},
					{
						text: '客服',
						url: 'kf',
						img: require('@/static/img/qz.png'),
						imgs: require('@/static/img/qzs.png')
					},
					{
						text: '我的',
						url: '/pages/tabar/user',
						img: require('@/static/img/user_gray.png'),
						imgs: require('@/static/img/user_green.png')
					}
				],
			}
		},
		onShow() {

		},
		created() {

		},
		methods: {
			toUrl(item) {
				if (item.url == 'kf') return;
				uni.switchTab({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.div {
		width: 100%;
		height: 100rpx;
		background-color: #EEEEEE;
	}

	.bottom {
		width: 100%;
		background: #fff;

	}

	.icon {
		width: 45rpx;
		height: 45rpx;
		vertical-align: bottom;
	}

	.icon_text {
		margin-top: 2px;
		font-size: 12px;
		color: #999999;
	}
	.orange{
		color: #FDA307;
	}
	.cen{
		text-align: center;
	}
</style>